<template>
  <div class="space">
    <h2>欢迎来到我的美食空间</h2>

    <!-- 个人信息 -->
    <div class="user-info">
      <!-- 头像 -->
      <div class="user-avatar">
        <img :src="userInfo.avatar" alt="" />
      </div>
      <!-- 基本信息 -->
      <div class="user-main">
        <p class="name">{{ userInfo.name }}</p>
        <p class="info">
          <span>{{ userInfo.createdAt | formatDate }}加入美食杰</span>
          <span> | </span>
          <router-link :to="{ name: 'edit' }" v-if="isOwner"
            >编辑个人资料</router-link
          >
        </p>
        <!-- 不是本人空间则显示关注按钮 -->
        <div class="follow" v-if="!isOwner">
          <el-button
            type="danger"
            size="mini"
            :class="{ followed: userInfo.isFollowing }"
            @click="toggleFollow"
          >
            {{ userInfo.isFollowing ? "已关注" : "+关注" }}
          </el-button>
        </div>
      </div>
      <!-- 列表 -->
      <ul class="user-info-more">
        <li>
          <span class="title">关注</span>
          <span class="text">{{ userInfo.following_len }}</span>
        </li>
        <li>
          <span class="title">粉丝</span>
          <span class="text">{{ userInfo.follows_len }}</span>
        </li>
        <li>
          <span class="title">收藏</span>
          <span class="text">{{ userInfo.collections_len }}</span>
        </li>
        <li>
          <span class="title">发布</span>
          <span class="text">{{ userInfo.work_menus_len }}</span>
        </li>
      </ul>
    </div>

    <!-- 选项卡 -->
    <el-tabs
      class="user-tabs"
      v-model="activeName"
      @tab-click="tabClickHandler"
    >
      <el-tab-pane label="作品" name="works"></el-tab-pane>
      <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="关注" name="following"></el-tab-pane>
      <el-tab-pane label="收藏" name="collection"></el-tab-pane>
    </el-tabs>

    <!-- 内容  作品 关注 粉丝 收藏-->
    <div class="user-info-show">
      <router-view :info="list" :activeName="activeName"></router-view>
    </div>
  </div>
</template>

<script>
import {
  getUserInfo,
  getFollowing,
  getFans,
  getCollection,
  toggleFollowing
} from "@/apis/user.js";
import { getMenus } from "@/apis/menu.js";

const getList = {
  //作品
  works: async (params) => {
    return await getMenus(params);
  },
  //粉丝
  fans: async (params) => {
    return await getFans(params);
  },
  //关注
  following: async (params) => {
    return await getFollowing(params);
  },
  //收藏
  collection: async (params) => {
    return await getCollection(params);
  },
};
export default {
  data() {
    return {
      userInfo: {}, //用户信息
      activeName: "works",
      // 判断是否是本人空间，默认是false
      isOwner: false,
      list: [], //列表数据（作品/关注/粉丝/收藏）四种中的一种数据
    };
  },
  methods: {
    // 切换关注
   async toggleFollow(){
      // 获取到关注后的信息
      const data=await toggleFollowing({
        followUserId:this.userInfo.userId,
      })
      // 将获取到的值重新赋值给userInfo
      this.userInfo=data.data;
    },
    // @tab-click 选项卡的点击事件
    tabClickHandler() {
      // 每次切换时清空列表
      this.list = [];
      // 点击做路由跳转
      this.$router.push({
        name: this.activeName,
        query: {
          // 将之前的参数原封不动添加到URL中
          ...this.$route.query,
        },
      });
    },
    // 获取列表
    async getInfoList() {
      // 闭包，保存了每次点击的路由activeName
      (async (activeName) => {
        let data = await getList[this.activeName]({
          userId: this.userInfo.userId,
        });
        // 赋值
        if (activeName === this.activeName) {
          this.list = data.data.list;
        }
      })(this.activeName);
    },
  },
  // 过滤器
  filters: {
    // 给时间过滤 截取日期的前10个字符 xxxx-xx-xx
    formatDate(val) {
      if (val) {
        return val.substr(0, 10);
      }
    },
  },
  watch: {
    $route: {
      async handler() {
        // 获取userId
        let { userId } = this.$route.query;
        // 如果没有传userId，说明访问的是自己的空间
        // 如果传了userId，和登录信息去比较，判断本人空间还是他人空间
        // 如果是本人空间 userInfo和vuex中的userInfo保持一致
        this.isOwner = !userId || userId == this.$store.state.userInfo.userId;
        if (this.isOwner) {
          // 本人空间
          this.userInfo = this.$store.state.userInfo;
        } // 如果是他人空间，需要获取这个人的基本信息，在赋值给this.userInfo
        else {
          // 他人空间，应该获取用户的基本信息 getUserInfo({userId})
          const result = await getUserInfo({ userId });
          this.userInfo = result.data;
        }
        // console.log(this.userInfo);
        // 控制高亮
        this.activeName = this.$route.name;

        this.getInfoList();
      },
      immediate: true, //立即执行
    },
  },
};
</script>

<style lang="stylus" scoped>
.space {
  h2 {
    text-align: center;
    margin: 20px 0;
  }

  /* 用户信息 */
  .user-info {
    height: 200px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    /* 头像 */
    .user-avatar {
      width: 200px;
      height: 200px;

      // background-color: teal;
      img {
        width: 100%;
        height: 100%;
      }
    }

    /* 基本信息 */
    .user-main {
      flex: 1;
      padding: 20px;
      position: relative;

      .name {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
      }

      .info {
        font-size: 14px;
        line-height: 2em;
        color: #999;
      }

      .follow {
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .el-button--danger.followed {
        background-color: #888;
        border-color: #666;
      }
    }

    /* 列表 */
    .user-info-more {
      width: 190px;
      display: flex;
      flex-wrap: wrap; // 超出换行
      justify-content: space-around;
      align-items: center;

      li {
        width: 80px;
        height: 80px;
        border-radius: 35px;
        border-bottom-right-radius: 0;
        box-shadow: 0px 0px 6px #555 inset;

        span {
          display: block;
          // padding-left: 15px;
          text-align: center;

          &.title {
            padding-top: 20px;
            font-size: 18px;
          }

          &.text {
            color: #f00;
            font-size: 14px;
          }
        }
      }
    }
  }

  /* 选项卡 */
  .user-tabs {
    /* >>> 样式穿透 可以改变引入组件的样式 */
    >>>.el-tabs__item.is-active { // 选中的文字样式
      color: #ff3232;
    }

    >>>.el-tabs__active-bar { // 选中文字下面的横线
      background-color: #ff3232;
    }

    >>>.el-tabs__nav-wrap::after { // 分割线
      background-color: transparent; // 透明色
    }
  }

  /* 内容 */
  .user-info-show {
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
  }
}
</style>

